<template>

    <view class="page">
        <!-- 自定义navbar -->
        <view class="nav-bar">
            <backNav title="设置" bgColor="#E0EEFF"></backNav>
        </view>
        <!-- 头像 -->
        <view class="avatar-box" @click="switchAvatar">
            <image class="avatar" :src="user.avatar" mode="aspectFill" />
            <!-- 右下角编辑图标 -->
            <!-- <image class="edit-icon" src="" mode="aspectFill" /> -->
            <u-icon class="edit-icon" name="edit-pen" size="25"></u-icon>
        </view>

        <!-- 2. 功能列表 -->
        <u-cell-group title="个人资料" :border="false">
            <u-cell-item title="昵称" :value="user.nickName || '语文张老师'" isLink @click="() => { }" >
                <template #right-icon>
                    <u-icon name="arrow-right" size="25"></u-icon>
                </template>
            </u-cell-item>
            <u-cell-item title="绑定微信" :value="user.openId ? '已绑定' : '未绑定'" isLink @click="bindWechat" >
                <template #right-icon>
                    <u-icon name="arrow-right" size="25"></u-icon>
                </template>
            </u-cell-item>
            <u-cell-item title="登录密码" isLink @click="updatePassword" >
                <template #right-icon>
                    <u-icon name="arrow-right" size="25"></u-icon>
                </template>
            </u-cell-item>
            <u-cell-item title="支付密码" isLink @click="updatePayPassword" >
                <template #right-icon>
                    <u-icon name="arrow-right" size="25"></u-icon>
                </template>
            </u-cell-item>
            <u-cell-item title="邀请码" :border="false">
                <template #right-icon>
                    <u-button type="primary" size="mini" @click="generateCode">
                        点击生成
                    </u-button>
                </template>
            </u-cell-item>
        </u-cell-group>

        <!--底部按钮 -->
        <view class="btn-box">
            <button class="btn logout" @click="logout">退出登录</button>
            <!-- <button class="btn delete" @click="deleteUser">注销账号</button> -->
        </view>

        <!--注销弹窗-->
        <!-- <u-popup ref="deleteDialog" type="center" :mask-click="false">
            <view class="dialog">
                <text class="dialog-title">确认要注销当前账号吗？</text>
                <view class="dialog-input">
                    <uni-easyinput v-model="password" :inputBorder="false" placeholder="请输入账号密码" type="password" />
                </view>
                <view class="dialog-footer">
                    <button class="dialog-btn cancel" @click="onDeleteUser(false)">取消</button>
                    <button class="dialog-btn confirm" @click="onDeleteUser(true)">确定</button>
                </view>
            </view>
        </u-popup> -->
    </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import BackNav from '@/components/backNav/backNav.vue'

// 用户信息
const user = reactive({
    avatar: '/static/images/default_avatar.png',
    nickName: '',
    openId: ''
})

// 密码输入
const password = ref('')

// 弹窗引用
const deleteDialog = ref(null)



// 页面加载时获取用户信息
onMounted(() => {
    getUserInfo()
})

// 获取用户信息
const getUserInfo = async () => {
    try {
        // 这里应该调用实际的API获取用户信息
        // const res = await api.getUserInfo()
        // user.avatar = res.avatar
        // user.nickName = res.nickName
        // user.openId = res.openId

        // 示例数据
        user.avatar = '/static/avatar1.png'
        user.nickName = '语文张老师'
        user.openId = '' // 空字符串表示未绑定
    } catch (error) {
        console.error('获取用户信息失败:', error)
        // 使用默认值
        user.avatar = '/static/avatar1.png'
        user.nickName = '语文张老师'
    }
}

// 切换头像
const switchAvatar = () => {
    // 这里可以调用上传头像的接口或者打开相册选择
    console.log('切换头像')
    uni.chooseImage({
        count: 1,
        success: (res) => {
            // 上传头像逻辑
            user.avatar = res.tempFilePaths[0]
            // uploadAvatar(res.tempFilePaths[0])
        }
    })
}

// 绑定微信
const bindWechat = () => {
    if (user.openId) {
        uni.showToast({
            title: '已绑定微信',
            icon: 'none'
        })
        return
    }

    // 微信绑定逻辑
    console.log('绑定微信')
    // 这里可以调用微信授权登录接口
    uni.showToast({
        title: '绑定成功',
        icon: 'success'
    })
    user.openId = 'mock_openid_' + Date.now()
}

// 修改登录密码
const updatePassword = () => {
    // 跳转到修改密码页面
    uni.navigateTo({
        url: '/pages/user/updatePassword'
    })
}

// 修改支付密码
const updatePayPassword = () => {
    // 跳转到修改支付密码页面
    uni.navigateTo({
        url: '/pages/user/updatePayPassword'
    })
}

// 生成邀请码
const generateCode = () => {
    // 生成邀请码逻辑
    console.log('生成邀请码')
    uni.showToast({
        title: '邀请码已生成',
        icon: 'success'
    })
}

// 退出登录
const logout = () => {
    uni.showModal({
        title: '提示',
        content: '确认退出登录吗？',
        success: (res) => {
            if (res.confirm) {
                // 执行退出登录逻辑
                console.log('用户点击确定')
                uni.removeStorageSync('token')
                uni.removeStorageSync('userInfo')
                // 清除用户信息和token
                // redirect to login page
                uni.navigateTo({
                    url: '/pages/login/login'
                })
            } else if (res.cancel) {
                console.log('用户点击取消')
            }
        }
    })
}

// 注销账号
const deleteUser = () => {
    // 显示注销确认弹窗
    deleteDialog.value?.open()
}

// 注销账号确认处理
const onDeleteUser = (confirm: boolean) => {
    if (!confirm) {
        // 关闭弹窗
        deleteDialog.value?.close()
        return
    }

    // 验证密码
    if (!password.value) {
        uni.showToast({
            title: '请输入密码',
            icon: 'none'
        })
        return
    }

    // 执行注销逻辑
    console.log('执行注销账号操作')
    // api.deleteUser(password.value)
    //   .then(() => {
    //     uni.showToast({
    //       title: '注销成功',
    //       icon: 'success'
    //     })
    //     // 跳转到登录页面
    //     setTimeout(() => {
    //       router.push('/pages/login/login')
    //     }, 1500)
    //   })
    //   .catch(err => {
    //     uni.showToast({
    //       title: '注销失败',
    //       icon: 'none'
    //     })
    //   })
    //   .finally(() => {
    //     // 关闭弹窗
    //     deleteDialog.value?.close()
    //   })

    // 模拟注销成功
    uni.showToast({
        title: '注销成功',
        icon: 'success'
    })

    // 关闭弹窗
    deleteDialog.value?.close()

    // 跳转到登录页面
    setTimeout(() => {
        router.push('/pages/login/login')
    }, 1500)
}


</script>

<style lang="scss" scoped>
.nav-bar {
    height: 150rpx;
}

.page {
    padding: 30rpx;
    background: linear-gradient(to bottom, #E0EEFF 10%, #ffffff 30%); //渐变色;
    min-height: 100vh;
}

/* 头像区域 */
.avatar-box {
    position: relative;
    /* 与头像同宽高 */
    width: 160rpx;
    height: 160rpx;
    margin: 0 auto 40rpx;

    .avatar {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 4rpx solid #fff;
        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .08);
    }

    .edit-icon {
        position: absolute;
        right: -4rpx;
        /* 负值贴边 */
        bottom: -4rpx;
        width: 32rpx;
        height: 32rpx;
        //background: #000 url('/static/image/edit.png') center/60% no-repeat;
        border-radius: 50%;
        border: 4rpx solid #fff;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, .15);
    }
}

/* 功能列表 */
.section {
    margin: 30rpx 0;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, .05);

    ::v-deep .uni-list-item {
        border: none !important;
        padding-top: 10rpx !important;
        padding-bottom: 10rpx !important;
    }

    ::v-deep .uni-list-item::after {
        display: none !important;
    }

    .section ::v-deep .uni-list--border {
        display: none !important;
    }

    .gen-btn {
        height: 45rpx;
        line-height: 40rpx;
        font-size: 25rpx;
        padding: 1rpx 20rpx;
        color: #fff;
        background: #2189FF;
        border-radius: 20rpx;
    }
}

/* 底部按钮 */
.btn-box {
    margin-top: 100rpx;
    padding: 0 30rpx;

    .btn {
        width: 100%;
        height: 88rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 30rpx;
        border-radius: 50rpx;
        margin-bottom: 30rpx;

        &.logout {
            background: #2189ff;
            color: #fff;
        }

        &.delete {
            background: #fff;
            color: #000;
            border: 1rpx solid #eee;
        }
    }
}

/* 弹窗样式 */
.dialog {
    background: #fff;
    width: 600rpx;
    border-radius: 16rpx;
    padding: 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    .dialog-title {
        font-size: 32rpx;
        margin-bottom: 30rpx;
    }

    .dialog-input {
        width: 100%;
        margin-bottom: 40rpx;
    }

    .dialog-footer {
        width: 100%;
        display: flex;
        justify-content: space-around;

        .dialog-btn {
            width: 200rpx;
        }
    }
}
</style>